<template>
  <div class="filter-container search-box">
    <el-form ref="form" :model="queryEntity" label-width="80px" size="small">
      <div>
        <el-row>
          <el-col :span="span" v-for="(item,index) in list" :key="index">
            <el-form-item :label="item.name">
              <el-input v-if="item.type=='text'" :type="getInputType(item)" v-model="queryEntity[item.prop]" :placeholder="item.placeholder" :clearable="true"
                @change="doChange(item.openChange)">
              </el-input>
              <el-date-picker v-if="item.type=='date'" type="date" v-model="queryEntity[item.prop]" :placeholder="item.placeholder" :clearable="true"
                @change="doChange(item.openChange)">
              </el-date-picker>
              <el-select v-if="item.type=='select'" v-model="queryEntity[item.prop]" :placeholder="item.placeholder" :clearable="true" @change="doChange(item.openChange)">
                <el-option v-for="(type,cindex) in selectData[index+'']" :label="type[item.label]" :value="type[item.value]" :key="cindex"></el-option>
              </el-select>
              <gridQuery v-if="item.type=='query'" :entity="queryEntity" :queryEntity="item.queryEntity" :pagination="item.pagination||false" :url="item.url"
                :columns="item.columns" :name="item.propName" :value="item.prop" :rowName="item.rowName" :rowValue="item.rowValue" :queryList="item.queryList"
                :openChange="item.openChange" @dataChange="doChange" :autoInput="item.autoInput">
              </gridQuery>
            </el-form-item>
          </el-col>
        </el-row>
        <slot> </slot>
      </div>
      <div style="clear: both;"></div>
    </el-form>
  </div>
</template>
<script>
//import gridQuery from '@/components/GridQuery'
import request from '@/router/axios'
import { Message, MessageBox } from 'element-ui'

export default {
  components: { gridQuery: () => import('@/components/GridQuery') },
  name: 'search',
  data () {
    return {
      selectData: { "0": [], "1": [], "2": [], "3": [], "4": [] },
    }
  },
  props: {
    width: {
      type: String,
      default: function () {
        return '22%'
      }
    },
    span: {
      type: Number,
      default: function () {
        return 5
      }
    },
    queryEntity: {
      type: Object,
      default: function () {
        return {}
      }
    },
    list: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  created () {
    this.initSelectData()
  },
  methods: {
    init () {
      this.initSelectData()
    },
    getInputType (item) {
      if (item.inputType) {
        return item.inputType
      }
      return 'text'
    },
    doChange (open) {
      if (open) {
        this.$emit('dataChange', this.queryEntity)
      }
    },
    initSelectData () {
      this.list.forEach((element, index) => {
        if (element.dataUrl) {
          if (element.type == 'select') {
            this.dataUrl(element.dataUrl).then(data => {
              if (data) {
                this.selectData[index + ''] = data
              }
            })
          }
        } else {
          this.selectData[index + ''] = element.values
        }
      })
    },
    dataUrl (url, data, params) {
      return request({
        url: url,
        method: 'post',
        data: data || { key: 'key' },
        params: params
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  width: 100%;
  margin-bottom: 5px;
  padding-top: 15px;
  padding-bottom: -25px;
  border: #ebeef5 1px solid;
}
.el-form-item {
  margin-bottom: 10px;
}
.div-box {
  width: 22%;
  float: left;
}
</style>
